@@include('header.htm', {
  "title": "Contacts - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "app",
	"sub_parent": "app",
	"active": "contacts"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper breadcrumb-contacts">
  <div>
    <h1>Contacts</h1>

    @@include('breadcrumb.htm', {
      "parent": "app",
      "sub_parent": "app",
      "active": "contacts"
    })
  </div>

  <div>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-add-contact"> Add Contact
    </button>
  </div>
</div>

<div class="row">
  <div class="col-lg-6 col-xl-4">
    <div class="card card-default p-4">
      <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
        <img src="assets/img/user/u-xl-1.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">

        <div class="media-body">
          <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>

          <ul class="list-unstyled">
            <li class="d-flex mb-1">
              <i class="mdi mdi-map mr-1"></i>
              <span>Nulla vel metus 15/178</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-email mr-1"></i>
              <span>exmaple@email.com</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-phone mr-1"></i>
              <span>(123) 888 777 632</span>
            </li>
          </ul>
        </div>
      </a>
    </div>
  </div>

  <div class="col-lg-6 col-xl-4">
    <div class="card card-default p-4">
      <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
        <img src="assets/img/user/u-xl-2.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">

        <div class="media-body">
          <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>

          <ul class="list-unstyled">
            <li class="d-flex mb-1">
              <i class="mdi mdi-map mr-1"></i>
              <span>Nulla vel metus 15/178</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-email mr-1"></i>
              <span>exmaple@email.com</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-phone mr-1"></i>
              <span>(123) 888 777 632</span>
            </li>
          </ul>
        </div>
      </a>
    </div>
  </div>

  <div class="col-lg-6 col-xl-4">
    <div class="card card-default p-4">
      <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
        <img src="assets/img/user/u-xl-3.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">

        <div class="media-body">
          <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>

          <ul class="list-unstyled">
            <li class="d-flex mb-1">
              <i class="mdi mdi-map mr-1"></i>
              <span>Nulla vel metus 15/178</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-email mr-1"></i>
              <span>exmaple@email.com</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-phone mr-1"></i>
              <span>(123) 888 777 632</span>
            </li>
          </ul>
        </div>
      </a>
    </div>
  </div>

  <div class="col-lg-6 col-xl-4">
    <div class="card card-default p-4">
      <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
        <img src="assets/img/user/u-xl-4.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">

        <div class="media-body">
          <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>

          <ul class="list-unstyled">
            <li class="d-flex mb-1">
              <i class="mdi mdi-map mr-1"></i>
              <span>Nulla vel metus 15/178</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-email mr-1"></i>
              <span>exmaple@email.com</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-phone mr-1"></i>
              <span>(123) 888 777 632</span>
            </li>
          </ul>
        </div>
      </a>
    </div>
  </div>

  <div class="col-lg-6 col-xl-4">
    <div class="card card-default p-4">
      <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
        <img src="assets/img/user/u-xl-5.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">

        <div class="media-body">
          <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>

          <ul class="list-unstyled">
            <li class="d-flex mb-1">
              <i class="mdi mdi-map mr-1"></i>
              <span>Nulla vel metus 15/178</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-email mr-1"></i>
              <span>exmaple@email.com</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-phone mr-1"></i>
              <span>(123) 888 777 632</span>
            </li>
          </ul>
        </div>
      </a>
    </div>
  </div>

  <div class="col-lg-6 col-xl-4">
    <div class="card card-default p-4">
      <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
        <img src="assets/img/user/u-xl-6.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
        <div class="media-body">
          <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>

          <ul class="list-unstyled">
            <li class="d-flex mb-1">
              <i class="mdi mdi-map mr-1"></i>
              <span>Nulla vel metus 15/178</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-email mr-1"></i>
              <span>exmaple@email.com</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-phone mr-1"></i>
              <span>(123) 888 777 632</span>
            </li>
          </ul>
        </div>
      </a>
    </div>
  </div>

  <div class="col-lg-6 col-xl-4">
    <div class="card card-default p-4">
      <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
        <img src="assets/img/user/u-xl-7.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">

        <div class="media-body">
          <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>

          <ul class="list-unstyled">
            <li class="d-flex mb-1">
              <i class="mdi mdi-map mr-1"></i>
              <span>Nulla vel metus 15/178</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-email mr-1"></i>
              <span>exmaple@email.com</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-phone mr-1"></i>
              <span>(123) 888 777 632</span>
            </li>
          </ul>
        </div>
      </a>
    </div>
  </div>

  <div class="col-lg-6 col-xl-4">
    <div class="card card-default p-4">
      <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
        <img src="assets/img/user/u-xl-8.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">

        <div class="media-body">
          <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>

          <ul class="list-unstyled">
            <li class="d-flex mb-1">
              <i class="mdi mdi-map mr-1"></i>
              <span>Nulla vel metus 15/178</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-email mr-1"></i>
              <span>exmaple@email.com</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-phone mr-1"></i>
              <span>(123) 888 777 632</span>
            </li>
          </ul>
        </div>
      </a>
    </div>
  </div>

  <div class="col-lg-6 col-xl-4">
    <div class="card card-default p-4">
      <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
        <img src="assets/img/user/u-xl-9.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">

        <div class="media-body">
          <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>

          <ul class="list-unstyled">
            <li class="d-flex mb-1">
              <i class="mdi mdi-map mr-1"></i>
              <span>Nulla vel metus 15/178</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-email mr-1"></i>
              <span>exmaple@email.com</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-phone mr-1"></i>
              <span>(123) 888 777 632</span>
            </li>
          </ul>
        </div>
      </a>
    </div>
  </div>

  <div class="col-lg-6 col-xl-4">
    <div class="card card-default p-4">
      <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
        <img src="assets/img/user/u-xl-10.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
        <div class="media-body">
          <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>

          <ul class="list-unstyled">
            <li class="d-flex mb-1">
              <i class="mdi mdi-map mr-1"></i>
              <span>Nulla vel metus 15/178</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-email mr-1"></i>
              <span>exmaple@email.com</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-phone mr-1"></i>
              <span>(123) 888 777 632</span>
            </li>
          </ul>
        </div>
      </a>
    </div>
  </div>

  <div class="col-lg-6 col-xl-4">
    <div class="card card-default p-4">
      <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
        <img src="assets/img/user/u-xl-11.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">

        <div class="media-body">
          <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
          <ul class="list-unstyled">
            <li class="d-flex mb-1">
              <i class="mdi mdi-map mr-1"></i>
              <span>Nulla vel metus 15/178</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-email mr-1"></i>
              <span>exmaple@email.com</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-phone mr-1"></i>
              <span>(123) 888 777 632</span>
            </li>
          </ul>
        </div>
      </a>
    </div>
  </div>

  <div class="col-lg-6 col-xl-4">
    <div class="card card-default p-4">
      <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
        <img src="assets/img/user/u-xl-12.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">

        <div class="media-body">
          <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>

          <ul class="list-unstyled">
            <li class="d-flex mb-1">
              <i class="mdi mdi-map mr-1"></i>
              <span>Nulla vel metus 15/178</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-email mr-1"></i>
              <span>exmaple@email.com</span>
            </li>

            <li class="d-flex mb-1">
              <i class="mdi mdi-phone mr-1"></i>
              <span>(123) 888 777 632</span>
            </li>
          </ul>
        </div>
      </a>
    </div>
  </div>
</div>


<!-- Contact Modal -->
<div class="modal fade" id="modal-contact" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header justify-content-end border-bottom-0">
        <button type="button" class="btn-edit-icon" data-dismiss="modal" aria-label="Close">
          <i class="mdi mdi-pencil"></i>
        </button>

        <div class="dropdown">
          <button class="btn-dots-icon" type="button" id="dropdownMenuButton" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <i class="mdi mdi-dots-vertical"></i>
          </button>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>

        <button type="button" class="btn-close-icon" data-dismiss="modal" aria-label="Close">
          <i class="mdi mdi-close"></i>
        </button>
      </div>

      <div class="modal-body pt-0">
        <div class="row no-gutters">
          <div class="col-md-6">
            <div class="profile-content-left px-4">
              <div class="card text-center widget-profile px-0 border-0">
                <div class="card-img mx-auto rounded-circle">
                  <img src="assets/img/user/u6.jpg" alt="user image">
                </div>

                <div class="card-body">
                  <h4 class="py-2 text-dark">Albrecht Straub</h4>
                  <p>Albrecht.straub@gmail.com</p>
                  <a class="btn btn-primary btn-pill btn-lg my-4" href="#">Follow</a>
                </div>
              </div>

              <div class="d-flex justify-content-between ">
                <div class="text-center pb-4">
                  <h6 class="text-dark pb-2">1503</h6>
                  <p>Friends</p>
                </div>

                <div class="text-center pb-4">
                  <h6 class="text-dark pb-2">2905</h6>
                  <p>Followers</p>
                </div>

                <div class="text-center pb-4">
                  <h6 class="text-dark pb-2">1200</h6>
                  <p>Following</p>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="contact-info px-4">
              <h4 class="text-dark mb-1">Contact Details</h4>
              <p class="text-dark font-weight-medium pt-4 mb-2">Email address</p>
              <p>Albrecht.straub@gmail.com</p>
              <p class="text-dark font-weight-medium pt-4 mb-2">Phone Number</p>
              <p>+99 9539 2641 31</p>
              <p class="text-dark font-weight-medium pt-4 mb-2">Birthday</p>
              <p>Nov 15, 1990</p>
              <p class="text-dark font-weight-medium pt-4 mb-2">Event</p>
              <p>Lorem, ipsum dolor</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Add Contact Button  -->
<div class="modal fade" id="modal-add-contact" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <form >
        <div class="modal-header px-4">
          <h5 class="modal-title" id="exampleModalCenterTitle">Create New Contact</h5>
        </div>

        <div class="modal-body px-4">
          <div class="form-group row mb-6">
            <label for="coverImage" class="col-sm-4 col-lg-2 col-form-label">User Image</label>

            <div class="col-sm-8 col-lg-10">
              <div class="custom-file mb-1">
                <input type="file" class="custom-file-input" id="coverImage" required>
                <label class="custom-file-label" for="coverImage">Choose file...</label>
                <div class="invalid-feedback">Example invalid custom file feedback</div>
              </div>
            </div>
          </div>

          <div class="row mb-2">
            <div class="col-lg-6">
              <div class="form-group">
                <label for="firstName">First name</label>
                <input type="text" class="form-control" id="firstName" value="Albrecht">
              </div>
            </div>

            <div class="col-lg-6">
              <div class="form-group">
                <label for="lastName">Last name</label>
                <input type="text" class="form-control" id="lastName" value="Straub">
              </div>
            </div>

            <div class="col-lg-6">
              <div class="form-group mb-4">
                <label for="userName">User name</label>
                <input type="text" class="form-control" id="userName" value="Doe">
              </div>
            </div>

            <div class="col-lg-6">
              <div class="form-group mb-4">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email" value="albrecht.straub@gmail.com">
              </div>
            </div>

            <div class="col-lg-6">
              <div class="form-group mb-4">
                <label for="Birthday">Birthday</label>
                <input type="text" class="form-control" id="Birthday" value="01-10-1993">
              </div>
            </div>

            <div class="col-lg-6">
              <div class="form-group mb-4">
                <label for="event">Event</label>
                <input type="text" class="form-control" id="event" value="Some value for event">
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer px-4">
          <button type="button" class="btn btn-secondary btn-pill" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary btn-pill">Save Contact</button>
        </div>
      </form>
    </div>
  </div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
